<template>
  <div class="page">
    <el-row :gutter="12">
      <el-col :span="12">
        <at-card>
          <h4 slot="title">
            <i class="icon icon-box"></i>
            交易成功率统计报表
          </h4>
          <at-table
            key="1"
            :columns="tableA.col"
            :data="tableA.data"
          ></at-table>
          <div style="text-align: right; margin-top: 20px">
            <at-button style="margin-right: 10px">上一页</at-button>
            <at-button>下一页</at-button>
          </div>
        </at-card>
      </el-col>
      <el-col :span="12">
        <img src="@/assets/images/1.png" alt="" />
      </el-col>
    </el-row>
    <el-row :gutter="12">
      <el-col :span="12">
        <img src="@/assets/images/2.png" alt="" />
      </el-col>
      <el-col :span="12">
        <at-card>
          <h4 slot="title">
            <i class="icon icon-box"></i>
            坐席服务质量报表
          </h4>
          <at-table
            key="1"
            :columns="tableB.col"
            :data="tableB.data"
          ></at-table>
          <div style="text-align: right; margin-top: 20px">
            <at-button style="margin-right: 10px">上一页</at-button>
            <at-button>下一页</at-button>
          </div>
        </at-card>
      </el-col>
    </el-row>
    <el-row :gutter="12">
      <el-col :span="12">
        <at-card>
          <h4 slot="title">
            <i class="icon icon-box"></i>
            坐席话务报表
          </h4>
          <at-table
            key="1"
            :columns="tableC.col"
            :data="tableC.data"
          ></at-table>
          <div style="text-align: right; margin-top: 20px">
            <at-button style="margin-right: 10px">上一页</at-button>
            <at-button>下一页</at-button>
          </div>
        </at-card>
      </el-col>
      <el-col :span="12">
        <img src="@/assets/images/3.png" alt="" />
      </el-col>
    </el-row>
    <el-row :gutter="12">
      <el-col :span="12">
        <img src="@/assets/images/4.png" alt="" />
      </el-col>
      <el-col :span="12">
        <at-card>
          <h4 slot="title">
            <i class="icon icon-box"></i>
            坐席考勤报表
          </h4>
          <at-table
            key="1"
            :columns="tableD.col"
            :data="tableD.data"
          ></at-table>
          <div style="text-align: right; margin-top: 20px">
            <at-button style="margin-right: 10px">上一页</at-button>
            <at-button>下一页</at-button>
          </div>
        </at-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableA: {
        col: [
          {
            title: '交易申请方',
            key: 'colA'
          },
          {
            title: '交易成功率',
            key: 'colB'
          },
          {
            title: '交易违规率',
            key: 'colC'
          },
          {
            title: '备注',
            key: 'colD'
          },
          {
            title: '统计月份',
            key: 'colE'
          }
        ],
        data: [
          {
            colA: '客户',
            colB: '98%',
            colC: '1%',
            colD: '无',
            colE: '2021.5'
          },
          {
            colA: '客户',
            colB: '99%',
            colC: '0%',
            colD: '无',
            colE: '2021.4'
          },
          {
            colA: '客户',
            colB: '96%',
            colC: '0%',
            colD: '无',
            colE: '2021.3'
          },
          {
            colA: '客户',
            colB: '97%',
            colC: '3%',
            colD: '无',
            colE: '2021.5'
          },
          {
            colA: '客户',
            colB: '98%',
            colC: '2%',
            colD: '无',
            colE: '2021.2'
          },
          {
            colA: '客户',
            colB: '98%',
            colC: '1%',
            colD: '无',
            colE: '2020.12'
          }
        ]
      },
      tableB: {
        col: [
          {
            title: '通话总量（分）',
            key: 'colA'
          },
          {
            title: '服务成功率',
            key: 'colB'
          },
          {
            title: '服务被投诉次数',
            key: 'colC'
          },
          {
            title: '服务未接听次数',
            key: 'colD'
          },
          {
            title: '统计月份',
            key: 'colE'
          }
        ],
        data: [
          {
            colA: '11003',
            colB: '99%',
            colC: '34',
            colD: '11',
            colE: '2021.5'
          },
          {
            colA: '11034',
            colB: '98%',
            colC: '33',
            colD: '33',
            colE: '2021.5'
          },
          {
            colA: '10975',
            colB: '96%',
            colC: '22',
            colD: '29',
            colE: '2021.3'
          },
          {
            colA: '11234',
            colB: '99%',
            colC: '10',
            colD: '50',
            colE: '2021.2'
          },
          {
            colA: '12455',
            colB: '98%',
            colC: '26',
            colD: '50',
            colE: '2021.1'
          },
          {
            colA: '13213',
            colB: '99%',
            colC: '30',
            colD: '67',
            colE: '2021.2'
          }
        ]
      },
      tableC: {
        col: [
          {
            title: '坐席通话时长（分）',
            key: 'colA'
          },
          {
            title: '业务解决率',
            key: 'colB'
          },
          {
            title: '坐席总数（个）',
            key: 'colC'
          },
          {
            title: '被统计月份',
            key: 'colD'
          },
          {
            title: '统计时间',
            key: 'colE'
          }
        ],
        data: [
          {
            colA: '10089',
            colB: '98%',
            colC: '10073',
            colD: '2021.5',
            colE: '2021.5.1'
          },
          {
            colA: '12134',
            colB: '97%',
            colC: '10033',
            colD: '2021.4',
            colE: '2021.5.1'
          },
          {
            colA: '12112',
            colB: '99%',
            colC: '10051',
            colD: '2021.3',
            colE: '2021.3.1'
          },
          {
            colA: '11453',
            colB: '98%',
            colC: '10081',
            colD: '2021.2',
            colE: '2021.2.1'
          },
          {
            colA: '14842',
            colB: '98%',
            colC: '10055',
            colD: '2021.1',
            colE: '2021.1.1'
          },
          {
            colA: '14324',
            colB: '97%',
            colC: '10047',
            colD: '2021.2',
            colE: '2021.2.1'
          }
        ]
      },
      tableD: {
        col: [
          {
            title: '坐席总数（个)',
            key: 'colA'
          },
          {
            title: '缺勤数量',
            key: 'colB'
          },
          {
            title: '被投诉数量',
            key: 'colC'
          },
          {
            title: '未接听数量',
            key: 'colD'
          },
          {
            title: '统计月份',
            key: 'colE'
          }
        ],
        data: [
          {
            colA: '10073',
            colB: '12',
            colC: '13',
            colD: '54',
            colE: '2021.5'
          },
          {
            colA: '10023',
            colB: '9',
            colC: '10',
            colD: '22',
            colE: '2021.5'
          },
          {
            colA: '10013',
            colB: '13',
            colC: '11',
            colD: '12',
            colE: '2021.3'
          },
          {
            colA: '10011',
            colB: '14',
            colC: '10',
            colD: '1',
            colE: '2021.2'
          },
          {
            colA: '10025',
            colB: '11',
            colC: '12',
            colD: '50',
            colE: '2021.1'
          },
          {
            colA: '10020',
            colB: '3',
            colC: '13',
            colD: '22',
            colE: '2020.12'
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  width: 70vw;
  margin: auto;
  margin-top: 20px;
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    text-align: center;
  }
  img {
    width: 400px;
    margin: 20px 0;
  }
}
</style>
